<template>
	<view class="confirm-content">
		<TopBar :indexflag="true" :combakflag="order_id?false:true" :lang="false" :bottom="true"
			:title="$t('ConfirmOrder')" :barstyle="colortopic()"></TopBar>
		<view class="" :style="{direction:i18nLocale=='ug'?'rtl':''}">
			<!-- 购物车列表 -->
			<view class="cart-list card-style" v-if="!order_id">
				<view class="card-item" v-for="(item,index) in totalshop.categories" v-if="totalshop.length!=0">
					<view class="item" v-for="(sub_item,sub_index) in item.products" v-if="sub_item.qty">
						<view class="left">
							<image :src="getImgSrc(sub_item.cover)" class="img"></image>
							<view class="shop-content">
								<view class="name">{{ i18nLocale=='ug'?sub_item.ug_name:sub_item.cn_name }}</view>
								<view class="qut"> <text class="x-text">X</text> <text>{{sub_item.qty}}</text>
								</view>
							</view>
						</view>
						<view class="right">
							￥{{sub_item.price}}
						</view>
					</view>
				</view>
				<view class="all-Price">
					<view class="title">{{$t('TotalPrice')}}</view>
					<view class="price">￥ {{price}}</view>
				</view>
				<view class="all-Price">
					<view class="title">{{$t('TableNumber')}}</view>
					<view style="color:#999">{{Tablenum}}</view>
				</view>
				<view class="remark">
					<view class="title">{{$t('Remark')}}</view>
					<view class="text-area">
						<u--textarea v-model="remark_value" maxlength="200" :placeholder="$t('RemarkPlaceholder')"
							border="none"></u--textarea>
					</view>
				</view>
			</view>
			<!-- 扫码支付 -->
			<view class="cart-list card-style" v-if="order_id">
				<view class="card-item">
					<view class="item" v-for="(sub_item,sub_index) in orderData.items" v-if="sub_item.qty">
						<view class="left">
							<image :src="getImgSrc(sub_item.cover)" class="img"></image>
							<view class="shop-content">
								<view class="name">{{ i18nLocale=='ug'?sub_item.ug_name:sub_item.cn_name }}</view>
								<view class="qut"> <text class="x-text">X</text> <text>{{sub_item.qty}}</text>
								</view>
							</view>
						</view>
						<view class="right">
							￥{{sub_item.price}}
						</view>
					</view>
				</view>
				<view class="all-Price">
					<view class="title">{{$t('TotalPrice')}}</view>
					<view class="price">￥ {{orderData.fee}}</view>
				</view>
				<view class="all-Price no-border">
					<view class="title">{{$t('Remark')}}</view>
					<view style="color:#999" v-if="orderData.remark">{{orderData.remark}}</view>
				</view>
				<view class="all-Price no-border">
					<view class="title">{{$t('OrderNumber')}}</view>
					<view style="color:#999">{{orderData.out_trade_no}}</view>
				</view>
				<view class="all-Price no-border">
					<view class="title">{{$t('TimePlaced')}}</view>
					<view style="color:#999">{{orderData.updated_at}}</view>
				</view>
				<view class="all-Price no-border">
					<view class="title">{{$t('TableNumber')}}</view>
					<view class="table-num">{{Tablenum}}</view>
				</view>
			</view>
			<!-- 扫码付款按钮 -->
			<view class="bottom-button" :style="{direction:i18nLocale=='ug'?'ltr':''}" v-if="order_id">
				<view class="shre-left">
					<view class="price-box">
						<view class="price">￥<text style="font-weight: bold;">{{orderData.fee}}</text> </view>
					</view>
				</view>
				<view class="share-right" @click="changePay">
					{{$t('Pay')}}
				</view>
			</view>
			<!-- 普通付款按钮 -->
			<view class="bottom-button" :style="{direction:i18nLocale=='ug'?'ltr':''}" v-if="!order_id">
				<view class="shre-left">
					<view class="icon-box">
						<u-icon name="shopping-cart" :color="colortopic()" size="48"></u-icon>
						<view class="number">{{totalnumber}}</view>
					</view>
					<view class="price-box">
						<view class="price">￥<text style="font-weight: bold;">{{price.toFixed(1)}}</text>
						</view>
					</view>
				</view>
				<view class="share-right" @click="Checkout">
					{{$t('GoCheckout')}}
				</view>
			</view>

		</view>
		<u-toast ref="uToast" :message="notmessage"></u-toast>
		<Loading :show="loadshow" text="" iconName="circle-round" :showText="false"></Loading>
	</view>
</template>

<script>
	import {
		postorders,
		getorderone,
		wePay
	} from '@/api/all.js';
	import {
		baseURL
	} from '@/api/base.js'; //导入接口的前缀地址
	import {
		Login
	} from '@/api/http.js'; //导入接口的前缀地址
	export default {
		data() {
			return {
				remark_value: '',
				selecetItem: [],
				alertdata: '',
				notmessage: '请仔细填写!',
				loadshow: false,
				order_id: '',
				orderData: ''
			}
		},
		onLoad(e) {
			//订单处理
			this.loadshow = true;
			if (this.$store.state.shop.totalshop) {
				this.$store.state.shop.totalshop.categories.map(item => {
					item.products.map(sub_item => {
						if (sub_item.qty) {
							this.selecetItem.push({
								id: sub_item.id,
								qty: sub_item.qty
							});
						}
					})
				})
				this.loadshow = false;
			}
			//如果扫码进入
			if (e.q) {
				const query = decodeURIComponent(e.q);
				console.log(query, '++++')
				this.order_id = this.getQueryString(query, 'order_id');
				//获取orde
				if (this.$store.state.usertoken) {
					this.getorderOne(this.order_id)
				} else {
					Login().then((res) => {
						console.log(res,'++++++++++')
						this.getorderOne(this.order_id)
					});
				}
			}
		},
		computed: {
			price() {
				return this.$store.state.shop.totalprice;
			},
			totalnumber() {
				return this.$store.state.shop.totalnumber;
			},
			totalshop() {
				return this.$store.state.shop.totalshop;
			},
			i18nLocale() {
				return this.$i18n.locale;
			},
			Shipment() {
				return this.$store.state.shipment;
			},
			Tablenum() {
				return this.$store.state.tabelinfo.table_num
			}
		},
		methods: {
			getorderOne(id) {
				let that = this;
				getorderone({
					id: id
				}).then((res) => {
					if (res.code == 200) {
						let data = res.body.data;
						that.orderData = data;
						that.$store.commit('Settabelinfo', {
							shop_id: data.shop_id,
							table_num: data.table_number
						});
						that.loadshow = false;
						that.changePay();
					}
				})
			},
			//订单生成微信支付
			Checkout() {
				let that = this;
				that.loadshow = true;
				if (this.selecetItem.length) {
					postorders({
						shop_id: that.$store.state.tabelinfo.shop_id,
						table_number: that.$store.state.tabelinfo.table_num,
						product: that.selecetItem,
						remark: that.remark_value,
					}).then((res) => {
						if (res.code == 200) {
							let id = res.body.data.id;
							that.wechatpay(id);
						}
					})
				}

			},
			//选择微信支付
			wechatpay(id) {
				let that = this;
				wePay({
					order_id: id
				}).then((res) => {
					console.log(res, '+++++++++++')
					if (res.code == 200) {
						let data = res.body.we_param;
						that.loadshow = false;
						that.WeChatpayment(data);
						console.log(data, '+++++++')
						
					} else {
						console.log(res, '++++++++')
					}
				})
			},
			//微信支付
			WeChatpayment(data) {
				//微信支付
				uni.requestPayment({
					"provider": "wxpay", //固定值为"wxpay"
					"timeStamp": data.timeStamp,
					"nonceStr": data.nonceStr,
					"package": data.package,
					"signType": data.signType,
					"paySign": data.paySign,
					success: function(res) {
						console.log("支付成功");
						uni.reLaunch({
							url: '/pages/main/main?current='+1
						})
					},
					fail: function(err) {
						console.log('支付失败:' + JSON.stringify(err));
					}
				});
			},
			// 扫码付款
			changePay() {
				this.wechatpay(this.order_id);
			},
			getQueryString(url, name) {
				var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
				var r = url.substr(1).match(reg)
				if (r != null) {
					return r[2]
				}
				return null;
			},
			//授权
			Subscribe() {
				uni.requestSubscribeMessage({
					//此处填写刚才申请模板的模板ID
					tmplIds: ['ZRRMrx7UqXbovngNPjiULsmUPGy9Qqi_k2ZQy0ArAnY'],
					success(res) {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scopd>
	.confirm-content {
		width: 100%;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		padding-bottom: 200rpx;

		.cart-list {
			display: flex;
			flex-direction: column;
			width: 100%;

			.card-item {
				width: 100%;

			}

			.item {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 15rpx;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 120rpx;
						height: 100rpx;
						border-radius: $uni-border-radius-sm;
					}

					.shop-content {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding: 0rpx 20rpx;

						.name {
							font-weight: bold;
							padding: 10rpx 0rpx;
						}

						.qut {
							font-size: $uni-font-size-base;
							color: $uni-text-color-grey;

							.x-text {
								font-size: $uni-font-size-sm0;
								padding-right: 3rpx;
							}
						}
					}

				}

				.right {
					display: flex;
					align-items: center;
					color: $uni-color-topic;
				}
			}

			.dcrtion-price {
				text-decoration: line-through;
			}

			.delivery-fees {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 0rpx;
				border-top: 2rpx solid $uni-border-color;
				border-bottom: 2rpx solid $uni-border-color;
				margin-top: 30rpx;

				.title {
					color: $uni-color-title;
					font-size: $uni-font-size-base;
				}

				.price {
					color: $uni-text-color-grey;
					direction: ltr !important;
				}
			}

			.all-Price {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: $uni-spacing-padding-sm 0rpx;
				border-top: 2rpx solid #999;
				margin-top: 30rpx;

				.price {
					direction: ltr !important;
				}

				.title {
					color: $uni-color-title;
					font-size: $uni-font-size-base;
				}

				.table-num {
					width: 50rpx;
					height: 50rpx;
					border-radius: 100%;
					background-color: $uni-color-topic;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.no-border {
				border: none;
				margin-top: 10rpx;
			}
		}

		.remark {
			width: 100%;
			display: flex;
			flex-direction: column;
			padding: $uni-spacing-padding-sm;
			box-sizing: border-box;
			margin-top: 20rpx;

			.title {
				color: $uni-color-title;
				font-size: $uni-font-size-base;
			}

			.text-area {
				width: 100%;
				// border: 1rpx solid #999;
				border-radius: 20rpx;
				padding: 10rpx;
				box-sizing: border-box;
				margin-top: 10rpx;
			}
		}

		.bottom-button {
			width: 92%;
			height: 100rpx;
			left: 4%;
			position: fixed;
			bottom: 4%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 50rpx;
			background-color: rgba(51, 51, 51, 1);

			.shre-left {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding-left: 20rpx;

				.icon-box {
					position: relative;

					.number {
						position: absolute;
						top: 0%;
						right: 0%;
						width: 40rpx;
						height: 40rpx;
						border-radius: 100%;
						background-color: $uni-color-topic;
						color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: $uni-font-size-sm1;
						border: 4rpx solid #333333;
					}
				}

				.price-box {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.price {
						color: #fff;
						font-size: 36rpx;
						font-weight: 300;
					}

					.move-price {
						color: $uni-text-color-grey;
						font-size: $uni-font-size-paragraph;
					}
				}
			}

			.share-right {
				height: 100%;
				background-color: $uni-color-topic;
				border-radius: 0rpx 50rpx 50rpx 0rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0rpx 60rpx;
				box-sizing: border-box;
				font-size: 38rpx;
				// font-weight: 550;
			}

		}

		.card-style {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: $uni-bg-color-box;
			border-radius: $uni-border-radius-lg;
			padding: $uni-spacing-padding-sm;
			box-sizing: border-box;
			margin-top: $uni-spacing-margin-sm;
			box-shadow: $uni-bg-shadow;
		}
	}

	.uni-textarea-compute,
	.uni-textarea-line,
	.uni-textarea-placeholder,
	.uni-textarea-textarea {
		font-size: 26rpx !important;
	}
</style>